<template>
  <div class="operation">
    <div class="header">操作</div>
    <div ref="contentRef" class="content">
      <div class="item" v-for="(item, index) in dataList" :key="index">
        <el-button type="primary" link> 排班管理 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, ref } from 'vue'

onMounted(() => {
  nextTick(() => {
    registerScroll()
  })
})

const emit = defineEmits(['scroll'])

const props = defineProps({
  headerHeight: {
    type: Number,
    default: 50
  },
  dataList: {
    type: Array,
    default: () => [
      {
        ganttDetails: [
          {
            id: 1,
            startTime: '2023-11-07 00:00:00',
            endTime: '2023-11-07 3:00:00',
            productCode: '物料1',
            process: '工序1',
            ganttStatus: 'Free'
          },
          {
            id: 2,
            startTime: '2023-11-07 03:00:00',
            endTime: '2023-11-07 8:00:00',
            productCode: '物料1',
            process: '工序1',
            ganttStatus: 'Stable'
          },
          {
            id: 3,
            startTime: '2023-11-07 08:00:00',
            endTime: '2023-11-07 10:00:00',
            productCode: '物料2',
            process: '工序2',
            ganttStatus: 'Inserted'
          }
        ]
      },
      {
        ganttDetails: [
          {
            id: 4,
            startTime: '2023-11-07 03:00:00',
            endTime: '2023-11-07 12:00:00',
            productCode: '物料666',
            process: '工序666',
            ganttStatus: 'Inserted'
          }
        ]
      },
      {},
      {},
      {
        ganttDetails: [
          {
            id: 5,
            startTime: '2023-11-07 00:00:00',
            endTime: '2023-11-07 3:00:00',
            productCode: '物料1',
            process: '工序1',
            ganttStatus: 'Free'
          },
          {
            id: 6,
            startTime: '2023-11-07 08:00:00',
            endTime: '2023-11-07 10:00:00',
            productCode: '物料2',
            process: '工序2',
            ganttStatus: 'Free'
          }
        ]
      },
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {}
    ]
  }
})

const contentRef = ref(null)

const registerScroll = () => {
  contentRef.value.addEventListener('scroll', () => {
    console.log('高度2', contentRef.value.scrollTop)
    emit('scroll', contentRef.value.scrollTop)
  })
}

const setScrollTop = (top) => {
  contentRef.value.scrollTop = top
}

const _headerHeight = computed(() => {
  return props.headerHeight + 'px'
})

defineExpose({
  setScrollTop
})
</script>

<style lang="scss" scoped>
.operation {
  width: 100%;
  height: 100%;
  border: 1px solid #ebeef5;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: v-bind(_headerHeight);
    width: 100%;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
  .content {
    width: 100%;
    height: calc(100% - v-bind(_headerHeight));
    overflow-y: auto;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: v-bind(_headerHeight);
      width: 100%;
      border-bottom: 1px solid #ebeef5;
      box-sizing: border-box;
    }
    .item:last-child {
      border-bottom: none;
    }
  }
}
</style>
